import React from 'react'
import {Link, withRouter} from 'react-router-dom'
import ManagementLayout from '../management-layout'
import {Button, Col, Icon, Menu, Row} from 'antd'
import {connect} from 'react-redux'
import {deleteSerial, getMySerials} from '../../../actions/serial'
import SerialBox from "../../common/serial-box";

class SerialsManagementBody extends React.Component {
  state = {
    currentTab: 'released',
  }

  componentDidMount = () => {
    this.props.getMySerials()
  }

  getCurrentTabSerials = () => {
    const {serials} = this.props
    const {currentTab} = this.state
    if (currentTab === 'released') {
      return serials.filter(serial => serial.isRelease)
    }
    return serials.filter(serial => !serial.isRelease)
  }

  render() {
    const {currentTab} = this.state
    const {user} =this.props
    return <ManagementLayout>
      <Link to='/serials-management/serials/new'>
        <Button type='primary'>添加</Button>
      </Link>
      <Menu
        onClick={({key}) => this.setState({currentTab: key})}
        selectedKeys={[currentTab]}
        mode='horizontal'
        style={{marginBottom: 30}}
      >
        <Menu.Item key='released'>
          <Icon type='notification' />已发布
        </Menu.Item>
        <Menu.Item key='unReleased'>
          <Icon type='inbox' />未发布
        </Menu.Item>
      </Menu>
      {
        <Row gutter={32}>
          {
            this.getCurrentTabSerials().map((serial,index) => {
              return <Col span={8} className='margin-b-3'>
                <SerialBox
                  serial={{...serial,username:user.userName}}
                  key={index}
                  needManagement
                  deleteSerial={id => this.props.deleteSerial(id)}/>
              </Col>
            })
          }
        </Row>
      }
    </ManagementLayout>
  }
}

const mapStateToProps = ({serials,user}) => ({serials,user})

const mapDispatchToProps = dispatch => ({
  getMySerials: () => dispatch(getMySerials()),
  deleteSerial: (id) => dispatch(deleteSerial(id)),
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SerialsManagementBody))
